This does the same thing as maxWidth, which isn't that great as an example. Here's a callback that I've been using in an application, restricting the resizable to a vertical grid of 30px:

resize: function(event, ui) {
    ui.size.height -= ui.size.height % 30;
    ui.size.height += ui.originalPosition.top % 30;
}

Maybe add this in addition to the current example?

I have a feeling the complexity of what's actually happening there might trip up users who are reading through the docs. Perhaps something simpler, like just throttling size and assuming the top/left is already on the grid?

Well, that's what you already have. Could add my example in addition to this one - if you think that is still too distracting, leave it as-is.

I meant something like ui.size.height = Math.round( ui.size.height / 30 ) * 30; to get the grid like snapping.

Gotcha, that looks good.